<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>首页 - 记账应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 全局视图切换按钮 */
        .global-view-button {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: #007aff;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 12px;
            cursor: pointer;
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0,122,255,0.3);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        /* 在iframe视图中隐藏该按钮 */
        .iframe-view .global-view-button {
            display: none !important;
        }
        .global-view-button svg {
            width: 14px;
            height: 14px;
        }
        /* 首页样式优化 */
        body {
            background-color: #f5f7fa;
            line-height: 1.5;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        .current-date {
            color: #64748b;
            margin-top: 4px;
            font-size: 13px;
        }
        .main-content {
            padding: 20px 15px 80px;
        }
        .user-avatar {
            width: 42px;
            height: 42px;
            font-size: 16px;
            background: linear-gradient(135deg, #4f46e5, #2563eb);
            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
        }
        .balance-card {
            margin: 15px 0;
            border-radius: 18px;
            border: none;
            position: relative;
            padding: 22px 20px;
            background: linear-gradient(135deg, #1a365d, #3b82f6);
            color: white;
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2);
        }
        .balance-heading {
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 6px;
        }
        .balance-value {
            font-size: 28px;
            font-weight: 700;
            margin-top: 4px;
            margin-bottom: 15px;
        }
        .transaction-summary {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
        }
        .summary-item {
            display: flex;
            flex-direction: column;
        }
        .summary-value {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .summary-label {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
        }
        /* 预算卡片 */
        .budget-card {
            background: white;
            border-radius: 18px;
            padding: 20px;
            margin: 15px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
        }
        .budget-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .budget-title {
            font-weight: 600;
            font-size: 16px;
            color: #334155;
        }
        .budget-settings {
            color: #3b82f6;
            font-size: 13px;
            text-decoration: none;
            font-weight: 500;
        }
        .budget-status {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 13px;
            color: #64748b;
        }
        .budget-progress {
            width: 100%;
            height: 6px;
            background-color: #e2e8f0;
            border-radius: 6px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        .budget-progress-bar {
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(90deg, #3b82f6, #2563eb);
        }
        .budget-remaining {
            font-size: 14px;
            font-weight: 500;
            color: #334155;
        }
        /* 图表容器 */
        .chart-container {
            background: white;
            border-radius: 18px;
            padding: 20px;
            margin: 15px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
        }
        .chart-title {
            font-weight: 600;
            font-size: 16px;
            color: #334155;
            margin-bottom: 15px;
        }
        /* 交易区域 */
        .transactions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0 15px;
        }
        .transactions-title {
            font-weight: 600;
            font-size: 16px;
            color: #334155;
        }
        .view-all {
            color: #3b82f6;
            font-size: 13px;
            text-decoration: none;
            font-weight: 500;
        }
        /* 交易项 */
        .bill-item {
            display: flex;
            align-items: center;
            padding: 16px;
            background: white;
            border-radius: 14px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
        }
        .bill-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 14px;
        }
        .bill-content {
            flex: 1;
        }
        .bill-title {
            font-weight: 600;
            margin-bottom: 4px;
            color: #1e293b;
        }
        .bill-detail {
            font-size: 13px;
            color: #64748b;
        }
        .bill-amount {
            font-weight: 600;
            text-align: right;
            width: 100px;
        }
        .expense {
            color: #ef4444;
        }
        .income {
            color: #10b981;
        }
        /* 导航栏优化 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background-color: white;
            padding: 10px 0;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #94a3b8;
            font-size: 12px;
            padding: 8px 0;
        }
        .nav-icon {
            margin-bottom: 4px;
        }
        .nav-item.active {
            color: #3b82f6;
        }
        .nav-item:first-child {
            color: #3b82f6;
        }
        /* 状态栏样式 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 15px;
            background-color: #f5f7fa;
        }
        .status-bar-title {
            font-weight: 600;
            font-size: 16px;
        }
        .status-bar-icons {
            display: flex;
            gap: 10px;
        }
    </style>
</head>
<body>
    <!-- 切换到全局视图按钮 -->
    <button class="global-view-button" onclick="window.location.href='../index.html'">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="3" width="7" height="7"></rect>
            <rect x="14" y="3" width="7" height="7"></rect>
            <rect x="14" y="14" width="7" height="7"></rect>
            <rect x="3" y="14" width="7" height="7"></rect>
        </svg>
        全局视图
    </button>

    <!-- 状态栏 -->
    <div class="status-bar">
        <div class="status-bar-time">9:41</div>
        <div class="status-bar-title">首页</div>
        <div class="status-bar-icons">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="9" y1="3" x2="9" y2="21"></line>
            </svg>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 头部欢迎区域 -->
        <div class="flex justify-between items-center mb-3">
            <div>
                <h1 class="text-xl font-bold text-gray-800">您好，用户</h1>
                <p class="current-date">今天是 <span id="current-date">2025年3月26日</span></p>
            </div>
            <div class="user-avatar rounded-full flex items-center justify-center text-white font-bold">
                用户
            </div>
        </div>

        <!-- 余额卡片 -->
        <div class="balance-card">
            <div class="balance-heading">当前余额</div>
            <div class="balance-value">¥12,540.00</div>
            
            <!-- 交易汇总 -->
            <div class="transaction-summary">
                <div class="summary-item">
                    <div class="summary-value">¥8,320.50</div>
                    <div class="summary-label">支出</div>
                </div>
                <div class="summary-item">
                    <div class="summary-value">¥20,860.50</div>
                    <div class="summary-label">收入</div>
                </div>
            </div>
        </div>

        <!-- 本月预算进度 -->
        <div class="budget-card">
            <div class="budget-header">
                <div class="budget-title">本月预算</div>
                <a href="#" class="budget-settings">预算设置</a>
            </div>
            <div class="budget-status">
                <div>已使用: ¥8,320.50</div>
                <div>总预算: ¥15,000.00</div>
            </div>
            <div class="budget-progress">
                <div class="budget-progress-bar" style="width: 55%"></div>
            </div>
            <div class="budget-remaining">剩余可用: ¥6,679.50</div>
        </div>

        <!-- 近期消费趋势图 -->
        <div class="chart-container">
            <div class="chart-title">近期消费趋势</div>
            <div style="height: 150px; position: relative;">
                <canvas id="spendingTrendChart"></canvas>
            </div>
        </div>

        <!-- 最近交易记录 -->
        <div class="transactions-header">
            <h2 class="transactions-title">最近交易</h2>
            <a href="bills.html" class="view-all">查看全部</a>
        </div>
            
        <!-- 交易列表 -->
        <div>
            <div class="bill-item">
                <div class="bill-icon bg-red-100">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 3h18v18H3zM12 8v8m-4-4h8" />
                    </svg>
                </div>
                <div class="bill-content">
                    <div class="bill-title">超市购物</div>
                    <div class="bill-detail">今天 10:30 · 日常开销</div>
                </div>
                <div class="bill-amount expense">-¥128.50</div>
            </div>
            
            <div class="bill-item">
                <div class="bill-icon bg-green-100">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 7c-1.67 0-3-1.33-3-3s1.33-3 3-3 3 1.33 3 3-1.33 3-3 3z" />
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                    </svg>
                </div>
                <div class="bill-content">
                    <div class="bill-title">工资收入</div>
                    <div class="bill-detail">昨天 09:00 · 工资</div>
                </div>
                <div class="bill-amount income">+¥12,000.00</div>
            </div>
            
            <div class="bill-item">
                <div class="bill-icon bg-red-100">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                        <rect x="4" y="19" width="16" height="2" rx="1" />
                    </svg>
                </div>
                <div class="bill-content">
                    <div class="bill-title">餐饮消费</div>
                    <div class="bill-detail">昨天 19:30 · 餐饮</div>
                </div>
                <div class="bill-amount expense">-¥85.00</div>
            </div>
        </div>
    </div>

    <!-- 导航栏组件容器 -->
    <div class="bottom-nav">
      <a href="home.html" class="nav-item" id="nav-home">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
              </svg>
          </div>
          <div>首页</div>
      </a>
      <a href="bills.html" class="nav-item" id="nav-bills">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
          </div>
          <div>账单</div>
      </a>
  
      <a href="quick-entry.html" class="nav-item" id="nav-quick-entry">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="16"></line>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
              </svg>
          </div>
          <div>记账</div>
      </a>
      <a href="statistics.html" class="nav-item" id="nav-statistics">
        <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="20" x2="18" y2="10"></line>
                <line x1="12" y1="20" x2="12" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
        </div>
        <div>统计</div>
    </a>
      <a href="settings.html" class="nav-item" id="nav-settings">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
          </div>
          <div>设置</div>
      </a>
  </div>

    <script>
        // 更新当前日期
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        document.getElementById('current-date').textContent = `${year}年${month}月${day}日`;
        
        // 消费趋势图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('spendingTrendChart').getContext('2d');
            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [
                        {
                            label: '支出',
                            data: [120, 190, 30, 50, 200, 155, 100],
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '收入',
                            data: [50, 90, 150, 45, 30, 180, 270],
                            borderColor: '#10b981',
                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 15,
                                padding: 10,
                                font: {
                                    size: 11
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        },
                        x: {
                            ticks: {
                                font: {
                                    size: 10
                                }
                            }
                        }
                    },
                    animation: {
                        onComplete: function() {
                            this.resize();
                        }
                    }
                }
            });
        });
    </script>
</body>
</html> 
